<script lang="ts" setup>
import { onMounted, reactive } from 'vue'	
	
const data = reactive<{
 top: number,
 rgiht: number,
 show: boolean
}>({
	top: 0,
	rgiht: 0,
	show: true
})	
onMounted(()=>{
	const { statusBarHeight, screenWidth } = uni.getSystemInfoSync();
	const { height, top, right, width } = wx.getMenuButtonBoundingClientRect();
	data.top = (top - statusBarHeight) * 2 + height + statusBarHeight
	data.rgiht = width + (screenWidth - right) - 40
})	

</script>

<template>
	<view v-if="data.show" class="tip-container" :style="{'top': data.top + 'px'}">
		<view class="triangle" :style="{'right': data.rgiht + 'px'}" />
		<view class="tip-wrapper">
			<image @click="data.show = false" src="/components/tip-collect-mp/close.svg" />
			<text style="margin-left: 10rpx;">点击右上角“…”</text>
			<text style="color:#4a96f9"> 添加到我的小程序</text>
		</view>
	</view>
</template>

<style lang="scss">
.tip-container{
  position: fixed;
  right: 30rpx;
  // width: 750rpx;
  height: 150rpx;
  display: flex;
  align-items: center;
  justify-content: center;
	z-index: 200;
	.triangle {
	  position: absolute;
	  top: -20rpx;
	  width: 0;
	  height: 0;
	  border-width: 10rpx; /* 设置边框宽度 */
	  border-style: solid;
	  border-color: transparent transparent #5C5B4E transparent; /* 上下透明，右边红色，左边也透明形成三角形 */
	  z-index: 999;
	}
	.tip-wrapper{
	  position: absolute;
	  right: 0rpx;
	  width: 237rpx;
	  height: 150rpx;
	  display: flex;
	  flex-direction: column;
	  align-items: flex-end;
	  padding:10rpx 20rpx;
	  border-radius: 12rpx;
	  background: rgba(0, 0, 0, 0.8);
	  padding-left: 5rpx;
	  box-sizing: border-box;
	  z-index: 999;
		text{
			color: white;
			font-size: 25rpx;
			font-weight: 600;
			line-height: 30rpx;
			margin-top: 10rpx;
		}
		image{
			width: 32rpx;
			height: 32rpx;
			margin-left: 10rpx;
		}	
	}	
}
</style>